$touming: unquote('#ffffffb3');
.play-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .bg-img {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 200%;
        background-position: center;
        filter: blur(60Px);
        z-index: -1;
    }
    .stop-anim {
        animation-play-state: paused !important;
    }
    .play-irc-view {
        flex: 1;
        overflow: auto;
        min-height: 700rpx;
        width: 100%;
        .play-irc {
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            color:#ffffffb3;
            height: 900rpx;
            .play-light{
                color:red;
            }
            view {
                margin: 20rpx 0;
            }
        }
    }
    .play-img-view {
        flex-grow: 1;
        position: relative;
        width: 750rpx;
        height: 750rpx;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: round 20s linear infinite;
        .play-img {
            width: 450rpx;
            height: 450rpx;
            border-radius: 100%;
            border: 4Px solid #ffffff4d;
            z-index: 2;
        }
        .play-img-before {
            border-radius: 100%;
            position: absolute;
            color: currentColor;
            width: 650rpx;
            height: 650rpx;
            animation: boneus 2s ease infinite;
            background: radial-gradient( transparent 230rpx, $touming 234rpx, transparent 236rpx, transparent 266rpx, $touming 266rpx, transparent 270rpx, transparent 320rpx, $touming 322rpx, transparent 324rpx, transparent)
        }
        .play-cic,
        .play-cic2,
        .play-cic3 {
            width: 20rpx;
            height: 20rpx;
            position: absolute;
            border-radius: 100%;
            background: radial-gradient(gainsboro, transparent);
            right: 50%;
        }
        .play-cic {
            top: -5rpx;
        }
        .play-cic2 {
            top: 50%;
            right: 50rpx;
        }
        .play-cic3 {
            top: 450rpx;
            left: 123rpx;
        } // .play-img-before,.play-img-after  {
        //     border-radius: 100%;
        //     position: absolute;
        //     color: currentColor;
        //     width: 700rpx;
        //     height: 700rpx;
        // }
        // .play-img-after {
        //     animation: re-boneus 3s ease infinite;
        //     background:radial-gradient(
        //     transparent 170rpx,$touming 174rpx,
        //     transparent 176rpx,transparent 206rpx,$touming 206rpx
        //     ,transparent 210rpx,transparent 220rpx,$touming 222rpx
        //     ,transparent 224rpx,transparent
        //     )
        // }
    }
    .play-slider-view {
        display: flex;
        width: 100%;
        align-items: center;
        font-size: 20rpx;
        padding: 0 30rpx 10rpx;
        box-sizing: border-box;
        color: white;
        .play-slider {
            flex-grow: 1;
        }
    }
}

.icon-view {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-bottom: 30rpx;
    .iconfont {
        font-size: 52rpx;
        color: white;
    }
}

@keyframes round {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes boneus {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
    }
}